import { View, Text, ScrollView, Image, TouchableOpacity } from 'react-native';
import SearchBar from '../components/business/SearchBar';
import QuickCategories from '../components/business/QuickCategories';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Ionicons } from '@expo/vector-icons';
import Swiper from 'react-native-swiper';
import { useRouter } from 'expo-router';

// 轮播图数据
const bannerData = [
  {
    id: '1',
    image: require('../../assets/banner/k1.png'),
  },
  {
    id: '2',
    image: require('../../assets/banner/k2.png'),
  },
  {
    id: '3',
    image: require('../../assets/banner/k3.png'),
  },
];

// 限时秒杀商品数据
const flashProducts = [
  {
    id: '1',
    price: 199,
    discountPrice: 99,
    image: require('../../assets/product/s1.png'),
  },
  {
    id: '2',
    price: 288,
    discountPrice: 120,
    image: require('../../assets/product/s2.png'),
  },
  {
    id: '3',
    price: 368,
    discountPrice: 168,
    image: require('../../assets/product/s3.png'),
  },
  {
    id: '4',
    price: 299,
    discountPrice: 138,
    image: require('../../assets/product/s4.png'),
  },
  {
    id: '5',
    price: 788,
    discountPrice: 365,
    image: require('../../assets/product/s5.png'),
  },
];

// 模拟热门商品数据
const hotProducts = [
  {
    id: '1',
    title: '大咖喵咪手办',
    price: 199,
    sales: 2345,
    image: require('../../assets/product/p1.jpg'),
  },
  {
    id: '2',
    title: '大咖龙舞手办',
    price: 299,
    sales: 1234,
    image: require('../../assets/product/p2.jpg'),
  },
  {
    id: '3',
    title: '【新年礼物】欧珑赤霞橘光护手霜柑橘果香调滋润补水情人节推荐女',
    price: 159,
    sales: 3456,
    image: require('../../assets/product/p3.png'),
  },
  {
    id: '4',
    title: 'carriere freres法国植物学家CF香薰蜡烛小番茄香氛ins新年礼物',
    price: 129,
    sales: 4567,
    image: require('../../assets/product/p4.png'),
  },
];

const HomePage = () => {
  const insets = useSafeAreaInsets();
  const router = useRouter();

  const handleProductPress = (id: string) => {
    router.push({
      pathname: "/product/[id]",
      params: { id }
    });
  };

  const renderProductItem = (item: typeof hotProducts[0]) => (
    <TouchableOpacity
      key={item.id}
      className="w-[48%] mb-4 bg-white rounded-xl overflow-hidden"
      activeOpacity={0.7}
      onPress={() => handleProductPress(item.id)}
    >
      <Image
        source={item.image}
        className="w-full h-36 rounded-t-xl"
        resizeMode="cover"
      />
      <View className="p-2">
        <Text numberOfLines={2} className="text-sm text-gray-800 mb-1 leading-5">
          {item.title}
        </Text>
        <View className="flex-row items-center justify-between">
          <View className="flex-row items-baseline">
            <Text className="text-xs text-red-500">¥</Text>
            <Text className="text-lg font-bold text-red-500">{item.price}</Text>
          </View>
          <Text className="text-xs text-gray-400">{item.sales}人付款</Text>
        </View>
      </View>
    </TouchableOpacity>
  );

  return (
    <View className="flex-1 bg-gray-50">
      <View
        className="absolute left-0 right-0 z-10 bg-white/80 backdrop-blur-md"
        // style={{ top: insets.top }}
      >
        <SearchBar
          onSearch={(text) => console.log('搜索:', text)}
        />
      </View>

      <ScrollView
        className="flex-1"
        showsVerticalScrollIndicator={false}
        contentContainerStyle={{
          paddingTop: insets.top + 20,
          paddingBottom: insets.bottom + 20
        }}
      >
        {/* 轮播图 */}
        <View className="w-full h-44 mt-2">
          <Swiper
            autoplay
            autoplayTimeout={3}
            showsPagination
            dotStyle={{
              backgroundColor: 'rgba(255,255,255,0.5)',
              width: 6,
              height: 6,
              borderRadius: 3,
              marginLeft: 3,
              marginRight: 3,
            }}
            activeDotStyle={{
              backgroundColor: '#fff',
              width: 6,
              height: 6,
              borderRadius: 3,
              marginLeft: 3,
              marginRight: 3,
            }}
          >
            {bannerData.map((item) => (
              <TouchableOpacity
                key={item.id}
                activeOpacity={0.9}
                className="flex-1 px-4"
                onPress={() => console.log('点击轮播图:', item.id)}
              >
                <Image
                  source={item.image}
                  className="w-full h-full rounded-xl"
                  resizeMode="cover"
                />
              </TouchableOpacity>
            ))}
          </Swiper>
        </View>

        <QuickCategories />

        {/* 限时秒杀 */}
        <View className="mt-4 mx-4 p-3 bg-white rounded-xl">
          <View className="flex-row items-center justify-between mb-3">
            <View className="flex-row items-center">
              <Ionicons name="flash" size={20} color="#f43f5e" />
              <Text className="text-base font-bold text-gray-900 ml-1">限时秒杀</Text>
            </View>
            <View className="flex-row items-center">
              <Text className="text-xs text-gray-500 mr-1">更多</Text>
              <Ionicons name="chevron-forward" size={16} color="#9ca3af" />
            </View>
          </View>
          <ScrollView
            horizontal
            showsHorizontalScrollIndicator={false}
            className="flex-row"
          >
            {flashProducts.map((item) => (
              <TouchableOpacity
                key={item.id}
                className="mr-3 items-center"
                activeOpacity={0.7}
                onPress={() => handleProductPress(item.id)}
              >
                <Image
                  source={item.image}
                  className="w-20 h-20 rounded-lg mb-1"
                  resizeMode="cover"
                />
                <Text className="text-red-500 text-xs">¥{item.discountPrice}</Text>
                <Text className="text-gray-400 text-xs line-through">¥{item.price}</Text>
              </TouchableOpacity>
            ))}
          </ScrollView>
        </View>

        {/* 热门推荐 */}
        <View className="px-4 mt-4">
          <View className="flex-row items-center justify-between mb-4">
            <View className="flex-row items-center">
              <Ionicons name="flame" size={20} color="#f43f5e" />
              <Text className="text-base font-bold text-gray-900 ml-1">热门推荐</Text>
            </View>
            <TouchableOpacity
              className="flex-row items-center"
              activeOpacity={0.7}
            >
              <Text className="text-xs text-gray-500 mr-1">查看更多</Text>
              <Ionicons name="chevron-forward" size={16} color="#9ca3af" />
            </TouchableOpacity>
          </View>

          <View className="flex-row flex-wrap justify-between">
            {hotProducts.map(renderProductItem)}
          </View>
        </View>
      </ScrollView>
    </View>
  );
};

export default HomePage;
